import './common/base.scss'
import 'bootstrap/dist/css/bootstrap.min.css'
import './sass/list.scss'

import {
    strToObj,
    removeClass,
} from './common/util';
NodeList.prototype.removeClass = removeClass;
import axios from 'axios';
// 索引
let index = 1
let canShu = location.search.substring(1)
let res = strToObj(canShu)
// 分类的active 显示和移除

if (res.two_menu) {
    // 有二级导航的走这
    localStorage.setItem('active', decodeURIComponent(res.two_menu))
    localStorage.setItem('cate_id', res.cate_id)
    localStorage.setItem('two_menu', decodeURIComponent(res.two_menu))
    let active = document.querySelector('.fenlei .active')
    console.log(active, 'pppp');
    active.classList.remove('active')
} else {
    // 重新打开，如果没有二级导航就没有二级导航
    // localStorage.removeItem('active')
    localStorage.setItem('active','全部')
    localStorage.setItem('cate_id', res.cate_id)
    localStorage.removeItem('two_menu')
}
console.log(decodeURIComponent(res.two_menu));
// 分类


// 判断参数，请求不同数据
if (decodeURIComponent(res.two_menu) == 'undefined') {
    (async function () {
        let {
            data: {
                data,
                data1
            }
        } = await axios({
            url: '/api/goods/getShop',
            params: {
                cate_id: res.cate_id,
            }
        })
        // 存储数据
        localStorage.setItem('fenlei', JSON.stringify(data))
        renderList(data)
        // 页数

        console.log(Math.ceil(data1.length / 8), 'qwqwqwq');
        localStorage.setItem('yeShu',Math.ceil(data1.length / 8))
        renderButton(Math.ceil(data1.length / 8))
    })()
} else {
    (async function () {
        let {
            data: {
                data,
                data1
            }
        } = await axios({
            url: '/api/goods/getShop',
            params: {
                cate_id: res.cate_id,
                two_menu: decodeURIComponent(res.two_menu)
            }
        })
        // 存储数据
        localStorage.setItem('fenlei', JSON.stringify(data))
        renderList(data)
        // 页数
        localStorage.setItem('yeShu',Math.ceil(data1.length / 8))
        console.log(Math.ceil(data1.length / 8), 'qwqwqwq');
        renderButton(Math.ceil(data1.length / 8))
    })()
}

// 渲染分类
let fenlei = document.querySelector('.fenlei')

function renderFenlei(id) {
    let active = localStorage.getItem('active')
    console.log(active, 'ggg');
    let data = JSON.parse(localStorage.getItem('dataType'))
    console.log(data);
    let res = data.find(item => {
        return item.id == id
    })
    console.log(res.sub_list, 'aaaaaaaaaa');
    fenlei.innerHTML += res.sub_list.map((item, index) => {
        if (active == item.type_name) {
            return `<li class="nav-item" role="presentation">
        <button class="nav-link active">${item.type_name}</button>
      </li>`
        }
        return `<li class="nav-item" role="presentation">
        <button class="nav-link">${item.type_name}</button>
      </li>`
    }).join('')
    // 没有第二参数

}
let id = res.cate_id
renderFenlei(id)


// 渲染列表
let list = document.querySelector('.jd-container .list')
console.log(list);

function renderList(data) {
    list.innerHTML = data.map(item => {
        return `<div class="card list-item">
        <img src="${item.goods_small_logo
        }" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">${item.goods_name
          }
          </p>
          <a href="#" class="">
            ￥ <b>${item.goods_price}</b>
          </a>
        </div>
    </div>`
    }).join(' ')
};
let sort = document.querySelectorAll('.sort button')
console.log(sort);

// 分类用事件委托
fenlei.addEventListener('click', async (e) => {
    // 高亮
    let btns = document.querySelectorAll('.fenlei button')
    btns.forEach(item => {
        item.classList.remove('active')
    })
    let lis=document.querySelectorAll('.sort button')
    console.log(lis,'lis');
    lis.forEach(item=>{
        item.classList.remove('active')
    })
    lis[0].classList.add('active')
    if (e.target.tagName == 'BUTTON') {
        localStorage.setItem('active', e.target.innerHTML)
        if (e.target.innerHTML != '全部') {
            localStorage.setItem('two_menu', e.target.innerHTML)
            let two = localStorage.getItem('two_menu')
            console.log(two);
            let {
                data: {
                    data,
                    data1
                }
            } = await axios({
                url: '/api/goods/getShop',
                params: {
                    cate_id: res.cate_id,
                    two_menu: two
                }
            })
            localStorage.setItem('fenlei', JSON.stringify(data))
            // 页数
            console.log(Math.ceil(data1.length / 8), 'qwqwqwq');
            localStorage.setItem('yeShu',Math.ceil(data1.length / 8))
            renderButton(Math.ceil(data1.length / 8))
            renderList(data)
            localStorage.setItem('two_menu', e.target.innerHTML)
        } else {
            let {
                data: {
                    data,
                    data1
                }
            } = await axios({
                url: '/api/goods/getShop',
                params: {
                    cate_id: res.cate_id,
                }
            })
            // 页数
            console.log(Math.ceil(data1.length / 8), 'qwqwqwq');
            localStorage.setItem('yeShu',Math.ceil(data1.length / 8))
            renderButton(Math.ceil(data1.length / 8))
            renderList(data)
        }
        e.target.classList.add('active')
    }

})
let pagination = document.querySelector('.pagination')

// 渲染按钮
function renderButton(shu) {
    console.log(shu);
    pagination.innerHTML = ``
    if (shu > 1 && shu < 5) {
        // 有多少个就生成多少个
        console.log('1到5以内');
        pagination.innerHTML += `<li class="active page-item">
            <button class="page-link pre" ><<</button>
          </li>`
        for (let i = 0; i < shu; i++) {
            pagination.innerHTML += `<li class="active page-item">
            <span class="page-link " >${i+1}</span>
          </li>`
        }
        pagination.innerHTML += `<li class="active page-item ">
        <button class="page-link next" >>></button>
      </li>`
    } else if (shu >= 5) {
        console.log('我只生成5个');
        pagination.innerHTML += `<li class="active page-item ">
        <button class="page-link pre" ><<</button>
      </li>`
        for (let i = 0; i < 5; i++) {
            pagination.innerHTML += `<li class="active page-item">
        <span class="page-link" >${i+1}</span>
      </li>`
        }
        pagination.innerHTML += `<li class="active page-item ">
    <button class="page-link next" >>></button>
  </li>`
    }
}
// 分页按钮的点击事件


pagination.addEventListener('click', async(e) => {
        // 前一页
        if(e.target.classList.contains('pre')){
            let active=localStorage.getItem('active')
            if (active=='全部') {
                index--
                if(index<1){
                    index=1
                }
                let {data:{data}}=await axios({
                    url:'/api/goods/getShop',
                        params:{
                            cate_id:localStorage.getItem('cate_id'),
                            page:index
                        }
                })
              
                renderList(data)
        }else{
            // 前一页的其他状态
            index--
                if(index<1){
                    index=1
                }
                let {data:{data}}=await axios({
                    url:'/api/goods/getShop',
                        params:{
                            cate_id:localStorage.getItem('cate_id'),
                            page:index,
                            two_menu:localStorage.getItem('two_menu')
                        }
                })
              
                renderList(data)
        }
        // 下一页
    }else if(e.target.classList.contains('next')){
        let active=localStorage.getItem('active')
        if(active=='全部'){
            let yeShu=localStorage.getItem('yeShu')
            console.log('后一页');
            index++
            if(index>yeShu){
                index=yeShu
            }
            let {data:{data}}=await axios({
                url:'/api/goods/getShop',
                    params:{
                        cate_id:localStorage.getItem('cate_id'),
                        page:index
                    }
            })
         
            renderList(data)
        }else{
            let yeShu=localStorage.getItem('yeShu')
            console.log('后一页');
            index++
            if(index>yeShu){
                index=yeShu
            }
            let {data:{data}}=await axios({
                url:'/api/goods/getShop',
                    params:{
                        cate_id:localStorage.getItem('cate_id'),
                        page:index,
                        two_menu:localStorage.getItem('two_menu')
                    }
            })
         
            renderList(data)
        }
        
    // 数字跳转请求
    }else if(e.target.tagName=="SPAN"){
        console.log(e.target.innerHTML);
        let active=localStorage.getItem('active')
        if(active=='全部'){
            let {data:{data}}=await axios({
                url:'/api/goods/getShop',
                params:{
                    cate_id:localStorage.getItem('cate_id'),
                    page:e.target.innerHTML,
                }
            })
            index=e.target.innerHTML
            console.log(data,active,'9999',index);
            renderList(data)
        }else{
            let {data:{data}}=await axios({
                url:'/api/goods/getShop',
                params:{
                    cate_id:localStorage.getItem('cate_id'),
                    page:e.target.innerHTML,
                    two_menu:localStorage.getItem('two_menu')
                }
            })
            index=e.target.innerHTML
            console.log(data,active,'9999',index);
            renderList(data)
        }
        // 发送请求
        // let data=await axios()
    }
})
// 分类的点击事件
let mr = document.querySelector('.mr')
let sl = document.querySelector('.sl')
let jg = document.querySelector('.jg')
// 价格
jg.addEventListener('click', (e) => {
    sort.forEach(item => {
        item.classList.remove('active')
    })
    e.target.classList.add('active')
    let data = JSON.parse(localStorage.getItem('fenlei'))
    let res = data.sort((a, b) => {
        return a.goods_price - b.goods_price
    })
    console.log(res);
    renderList(res)
})
// 默认
mr.addEventListener('click', (e) => {
    sort.forEach(item => {
        item.classList.remove('active')
    })
    e.target.classList.add('active')
    let data = JSON.parse(localStorage.getItem('fenlei'))
    renderList(data)
})
// 销量 没做，不知道是哪个定义
sl.addEventListener('click', (e) => {
    sort.forEach(item => {
        item.classList.remove('active')
    })
    e.target.classList.add('active')

})